.devPortrait{
  display: flex;
  flex-direction: column;
  height: 100vh;
  .chart{
    flex: 1;
    // height: 662px;
  }
  .header{
    height: 44PX;
    background-image: linear-gradient(180deg,#FF774D 0%,#E65752 100%);
    position: relative;
    padding: 0 16PX;
    text-align: center;
    font-size: 21PX;
    color: #fff;
    .header_title{
      font-size:36px;
      font-family:PingFang SC;
      font-weight:500;
      line-height:50px;
      color:#fff
    }
    .header_time{
      font-size:24px;
      font-family:PingFang SC;
      font-weight:500;
      line-height:33px;
      color:#fff;
      opacity:0.6;
    }
    .back{
      position: absolute;
      left: 0;
      height: 44PX;
      width: 50PX;
      padding-left: 16PX;
      display: flex;
      align-items: center;
      img{
        width: 11PX;
      }
    }
  }
}

@media screen and (orientation: portrait) {
  .devPortrait {
    -webkit-transform:rotate(90deg);
    -webkit-transform-origin:0% 0%;/*1.重置旋转中心*/

    -moz-transform: rotate(90deg);
   -moz-transform-origin:0% 0%;
   
   -ms-transform: rotate(90deg);
   -ms-transform-origin:0% 0%;
   
   transform: rotate(90deg);
   transform-origin:0% 0%;
    
   width: 100vh;/*2.利用 vh 重置 ‘宽度’ */
   height: 100vw;/* 3.利用 vw 重置 ‘高度’ */
   top: 0;
   position: absolute;
   left: 100vw;/* 4.旋转后页面超出屏幕，重置页面定位位置 */
  }
}


@media screen and (orientation: landscape) {
  .devPortrait {
      -webkit-transform:rotate(0);
      -moz-transform: rotate(0);
      -ms-transform: rotate(0);
      transform: rotate(0);
      // height: 100vh;
      // width: 100vw;
      // top: 0;
      // position: absolute;
      // left: 0
  }
}